<template>
  <div class="joinAddress-box">
    <!-- eslint-disable -->
    <div class="form-box">
      <div class="form-item">
        <label for="consignee" class="form-lable">收货人</label>
        <input type="text" id="consignee" v-model.trim="consignee" class="form-input"  placeholder="请输入收货人名称" >
      </div>
      <div class="form-item">
        <label for="phone" class="form-lable">联系电话</label>
        <input type="number" id="phone" @change="handleOnInputMobile" v-model.number.trim="phone" class="form-input"  placeholder="11位有效的手机号码" >
      </div>
      <div class="form-item">
        <label for="zipCodeNo" class="form-lable">邮编号码</label>
        <input type="number" id="sellPrice" @change="handleOnInputZipCodeNO" v-model.number.trim="zipCodeNo" class="form-input"  placeholder="请输入6位邮编号" >
      </div>
      <div class="form-item form-last-item">
        <label for="detailsAddress" class="form-lable">详细地址</label>
        <textarea name="detailsAddress" v-model.trim="detailedAddress" class="form-input" id="detailsAddress" cols="9"  rows="5" placeholder="配送地址" contenteditable="true" style="-webkit-user-select:auto;"></textarea>
      </div>
      <div class="form-btn">
        <button type="button" @click="joinAddress" class="submit">确定</button>
      </div>
    </div>
    <Popups :isShow.sync="isPopup_error" title="提示">
      <div  class="cancel-info" slot="body">
        <span>
          {{error_info}}
        </span>
      </div>
      <div slot="footer" class="pop-footer-btns">
        <button class="pop-footer-close" @click="closePopAll" >确定</button>
      </div>
    </Popups>
  </div>
</template>
<script>
import Ajax from "@/mixins/ajax";
import { Popups } from "~/popOut";

// 添加地址接口
const joinAddressUrl = "/card-service-web/address/insertDeliveryAddress";
export default {
  name: "JoinAddress",
  mixins: [Ajax],
  components: {
    Popups
  },
  data() {
    return {
      // 收货人
      consignee: null,
      // 联系电话
      phone: null,
      // 邮编号码
      zipCodeNo: null,
      // 详细地址
      detailedAddress: null,
      // 是否可以提交
      isSubmit: false,
      isPopup_error: false,
      error_info: "",
      // 是否提交中
      submiting: false
    };
  },
  methods: {
    closePopAll() {
      this.isPopup_error = false;
    },
    /**
     * 添加地址
     */
    joinAddress() {
      const { consignee, phone, detailedAddress, zipCodeNo, isSubmit } = this;
      if (!consignee || !phone || !detailedAddress || !zipCodeNo || !isSubmit) {
        /* eslint-disable */
        this.error_info = "请填写正确信息再提交!";
        this.isPopup_error = true;
        return;
      }
      const defaultStatus = this.$route.query.defaultStatus
        ? this.$route.query.defaultStatus
        : 0;

      if (!this.submiting) {
        this.post(joinAddressUrl, {
          consignee,
          detailedAddress,
          mobile: phone,
          postcode: zipCodeNo,
          defaultStatus
        }).then(body => {
          if (+body.execErrCode === 200) {
            let fullPathParam = this.$route.query.fullPathParam;
            // 如果是在地址列表里跳转过来的 则需要做参数处理
            if (fullPathParam) {
              const re = /(.*)(fullPath=.*)/;
              fullPathParam = fullPathParam.replace(re, `${unescape("$1")}$2`);
              this.$router.replace(fullPathParam);
            } else {
              this.$router.replace(unescape(this.$route.query.fullPath));
            }
            this.submiting = false;
          }
        });
      }
      this.submiting = true;
    },
    // 处理手机号
    handleOnInputMobile(e) {
      
      const numRe = /\D/g;
      const re = /^1[3|4|5|7|8][0-9]\d{8}$/;
      const value = e.target.value.replace(numRe, "");
      this.phone = value;
      if (!re.test(value) || !+value) {
        this.isSubmit = false;
        /* eslint-disable */
        this.error_info = "手机号不正确，手机号应该是11位数字。";
        this.isPopup_error = true;
      } else {
        this.isSubmit = true;
      }
    },
    // 处理邮编号
    handleOnInputZipCodeNO(e) {
      const numRe = /\D/g;
      const re = /^\d{6}$/;
      const value = e.target.value.replace(numRe, "");
      this.zipCodeNo = value;
      if (!re.test(value) || !+value) {
        this.isSubmit = false;
        /* eslint-disable */
        this.error_info = "邮编号不正确，邮编是6位数字";
        this.isPopup_error = true;
      } else {
        this.isSubmit = true;
      }
    }
  }
};
</script>

<style scoped>
.joinAddress-box {
  position: absolute;
  top: 1.5rem;
  right: 0;
  bottom: 0;
  left: 0;
  width: auto;
  font-size: 0.51rem;
  background: #fff;
}
.form-box {
  padding: 0.48rem 0.48rem 0;
}
.form-item {
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-align-items: center;
  align-items: center;
  margin-bottom: 0.3rem;
  background-color: #f7f6f6;
  padding: 0.3rem 0 0.36rem 0.36rem;
}
.form-item .form-input {
  width: 70%;
  flex-grow: 1;
  padding: 0 0.08rem 0 0.48rem;
  border: none;
  font-size: 0.51rem;
  color: #2f2f2f;
  background-color: #f7f6f6;
}
.form-item .form-lable {
  white-space: nowrap;
}
.form-last-item .form-lable {
  -webkit-align-self: flex-start;
  align-self: flex-start;
}
input:focus,
textarea:focus {
  outline: none;
}

.form-btn .submit {
  width: 8.64rem;
  height: 1.15rem;
  background-color: #d11463;
  border-radius: 0.1rem;
  color: #fff;
  font-size: 0.54rem;
}
.pop-footer-btns .pop-footer-close {
  width: 5.01rem;
  height: 1.08rem;
  background-color: #d11463;
  border-radius: 2rem;
  color: #fff;
  font-size: 0.54rem;
}
</style>

